<script>
import { h, shallowRef, inject, watch } from 'vue';
import EditItem from './EditItem.vue';
import Empty from './Empty.vue';

export default {
    props: ['config'],
    setup(props) {
        const StateEvent = inject('StateEvent');
        const RenderView = shallowRef();
        RenderView.value = StateEvent.Rules[props.config.type].Edit || StateEvent.Rules[props.config.type].View;
        return () => {
            const ChildEvent = {};
            for (const key in props.config.slots) {
                const element = props.config.slots[key];
                ChildEvent[key] = () => {
                    const children = [];
                    if (element.length != 0) {
                        for (let i = 0; i < element.length; i++) {
                            const item = element[i];
                            children.push(h(EditItem, { config: item, key: item.field, }));
                        }
                    } else {
                        children.push(h(Empty, { config: props.config, }));
                    }
                    return children;
                }
            }
            const ele = h(RenderView.value, {
                config: props.config,
                field: props.config.field,
                key: props.config.field,
                ref: ele => {
                    StateEvent.SetCellById(props.config.field, ele)
                },
            }, ChildEvent);
            StateEvent.SetEle(props.config.field, ele);
            return ele
        }
    }
}
</script>

<style lang="less" scoped></style>